<template>
    <div class="pkg-select">
        <div class="pkg-select-box">
            <div class="item white-bg default-box-shadow" v-for="(item, index) in value" :key="index">
                <div class="cover-box" @click.stop="toSpecDetail(item)">
                    <img class="cover" :src="item.cover" mode="aspectFill" />
                </div>
                <div class="option-label primary-bg white-color tiny-text" v-if="item.discount !== 100">
                    {{'选择该产品享' + (item.discount / 10) + '折折扣'}}
                </div>
                <div class="info-box">
                    <div class="option-info">
                        <div class="title normal-text">{{item.value}}</div>
                        <div class="price small-text dark-pink-color">{{item.price}}</div>
                    </div>
                    <div class="outer-checkbox normal-text dark-pink-color">
                        <div class="holder small-text text-center">{{item.is_default ? '当前套餐默认产品' : ''}}</div>
                        <!-- <span class="icon" v-if="item.checked">&#xe61f;</span>
                        <span class="icon" v-else>&#xe61e;</span> -->
                    </div>
                    <div class="text-center">
                        <Stepper v-model="item.number" :can-change="canOptionDel" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    api,
} from '@/lib/api';
import Stepper from '@/components/stepper/stepper.vue';

export default {
    name: 'PackageSelect',
    components: {
        Stepper,
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        value: {
            type: Array,
            required: true,
        },
        id: {
            type: Number,
            required: true,
        },
        // options: {
        //     type: Array,
        //     required: true,
        // },
    },
    data() {
        return {
            currentValue: [],
        };
    },
    computed: {
        mustSelectOne() {
            return this.value.some(item => item.is_default);
        },
        canOptionDel() {
            return this.value.reduce((prev, next) => {
                return {
                    number: prev.number + next.number,
                };
            }, {
                number: 0,
            }).number > 1 || !this.mustSelectOne;
        },
    },
    watch: {
        currentValue: {
            handler(val) {
                this.$emit('change', val);
            },
            deep: true,
        },
    },
    methods: {
        toSpecDetail(option) {
            api.navigateTo({
                url: '/pages/spec_detail/main',
                query: {
                    detail: JSON.stringify(option),
                },
            });
        },
    },
    onLoad() {
        this.currentValue = this.value;
        // console.log(this.value);
    },
};
</script>
<style lang="less">
@import "../../lib/style/mixins.less";
.pkg-select {
    .pkg-select-box {
        padding: 10px 0;
        margin-right: -10px;
        white-space: nowrap;
        overflow-x: scroll;
        .item {
            position: relative;
            display: inline-block;
            width: 144px;
            margin-right: 10px;
            border-radius: 14rpx;
            .cover-box {
                width: 144px;
                height: 125px;
                .cover {
                    width: 100%;
                    height: 100%;
                    border-radius: 14rpx 14rpx 0 0;
                }
            }
            .option-label {
                position: absolute;
                transform: translateY(-50%);
                padding: 2rpx 8rpx;
                border-radius: 12rpx 0 12rpx 0;
            }
            .info-box {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                height: 70px;
                padding: 16rpx 14rpx;
                .normal-text {
                    line-height: 28rpx;
                }
                .option-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .title {
                        width: 180rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .outer-checkbox {
                    .icon {
                        margin-left: 4rpx;
                        font-size: 30rpx;
                    }
                }
            }
        }
    }
}
</style>
